<template>
  <div class="drawerModifyData">
    <el-drawer :visible="drawerModifyData"
               title="用户修改信息"
               size="40%"
               :before-close="handleClose"
               ref="drawer">
      <!-- 用户余额管理-->
      <el-form label-width="77px"
               class="ele-form-search"
               @keyup.enter.native="search"
               @submit.native.prevent
               :model="where">
        <el-form-item label="头像:"
                      prop="avatar">

          <img class="avatar"
               :src="where.avatar"
               alt="">

        </el-form-item>

        <el-form-item label="余额:"
                      prop="balance">

          <el-input clearable
                    v-model="where.balance"
                    placeholder="请输入余额" />

        </el-form-item>
        <el-form-item label="积分:"
                      prop="integral">

          <el-input clearable
                    v-model.number="where.integral"
                    placeholder="请输入积分" />

        </el-form-item>
        <el-form-item label="上级:"
                      prop="dateRange">
          <el-select clearable
                     class="ele-block"
                     v-model.number="where.superiorUser"
                     placeholder="请选择您的上级">
            <el-option v-for="(i,j) in serviceStatusList"
                       :key="j"
                       :label="i.label"
                       :value="i.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 提交返回按钮 -->
      <div class="drawer__footer">
        <el-button round
                   type="primary"
                   @click="sumbit()">保存</el-button>

        <el-button style="margin-left: 10px;"
                   round>返回</el-button>

      </div>
    </el-drawer>

  </div>
</template>
	<script>

import { topUpRecordsModify } from '@/api/userList/index.js'
export default {
  name: 'drawerUserBalance',
  props: {
    drawerModifyData: {
      type: Boolean,
      default: false
    },
    data: Object
  },
  components: {

  },

  data () {

    // 默认表单数据
    const defaultWhere = {
      avatar: '',
      // 积分
      integral: '',
      //   余额
      balance: '',
      //  上级
      superiorUser: '',
      userId: ''
    };
    return {

      where: {
        ...defaultWhere
      },
      rechargeObject: null


    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },


  },
  methods: {


    // 关闭抽屉
    handleClose () {
      console.log('用户余额管理')
      this.$emit('update:drawerModifyData', false);
    },
    async sumbit () {
      console.log(this.where)
      const res = await topUpRecordsModify(this.where)
      console.log(res)
    }
  },
  watch: {

    drawerModifyData (visible) {
      this.$nextTick(() => {
        if (visible) {
          console.log(this.$util);
          console.log(this.data)
          if (this.data) {
            // 隐藏账号密码 rechargeObject
            console.log(this.data)
            this.where.userId = this.data.userId
            this.$util.assignObject(this.where, {
              ...this.data
            });
            this.isUpdate = true;
          } else {
            this.isUpdate = false;

          }
        } else {

        }
      });
    }
  }
};

	</script>
	<style lang="less">
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 36px;
}
.drawerModifyData {
  //   .ele-form-search {
  //     padding: 30px;
  //   }
  .drawer__footer {
    display: flex;
    justify-content: flex-start;
    padding: 20px;
    position: fixed;
    width: 825px;
    bottom: 0;
  }
}
</style>